import { defineStore } from 'pinia';
import { themeSettings } from '@/settings/index.js';
import cloneDeep from 'lodash-es/cloneDeep.js';

import { useAppStore } from '@/store/modules/app.js';

export const useThemeStore = defineStore('theme', {
  state() {
    return {
      darkTheme: cloneDeep(themeSettings.darkTheme),
      tags: cloneDeep(themeSettings.tags),
      header: cloneDeep(themeSettings.header),
      naiveThemeOverrides: cloneDeep(themeSettings.naiveThemeOverrides),
      componentSize: cloneDeep(themeSettings.componentSize),
    };
  },
  getters: {},
  actions: {
    lightSwitch() {
      this.darkTheme = !this.darkTheme;
    },
    setTabVisible(visible) {
      this.tags.visible = visible;
    },
    switchComponentSize(size) {
      this.componentSize = size;
      // $VXETable.setup({
      //   size: /^(tiny|small|medium)$/.test(size) ? (size === 'tiny' ? 'mini' : size) : '',
      // });
      const appStore = useAppStore();
      appStore.reloadApp().then();
    },
  },
  // 开启持久化
  persist: {
    enabled: true,
    strategies: [{ key: 'THEME_CACHE', storage: localStorage, paths: ['darkTheme', 'componentSize'] }],
  },
});
